<template>
  <view class="page-search" v-cloak>
    <view class="search-header">
      <view class="header-city">
        <image class="image" src="@/static/position-black.png" mode="aspectFill"></image>
        {{cityInfo.city}}
      </view>
      <view class="header-search">
        <uni-icons type="search" style="margin-right: 4rpx;" size="16" color="#B0B0B0"></uni-icons>
        <input class="input" placeholder="搜索门店" v-model="searchKey" @confirm="handleSearch()" />
      </view>
    </view>
    
    <view class="search-guess">
      <view class="title">搜索历史 <image v-show="searchHistory.length" src="@/static/delete.png" @click="handleDelete()" mode="aspectFill" class="img"></image> </view>
      <view class="guess-list">
        <view class="list-item" v-for="(item,idx) in searchHistory" :key="idx" @click="handleSearch(item)">{{item}}</view>
      </view>
    </view>
    
    <view class="search-store">
      <view class="store-item" v-for="(item,idx) in list" :key="idx" @click="handleSelect(item)">
        <uni-icons type="search" style="margin-right: 4rpx;" size="16" color="#B0B0B0"></uni-icons>
        <view class="item-info">
          <h2>{{item.name}}</h2>
          <view class="info-p">
            {{item.orgIndustry}} <span>|</span>
            <view class="dot">{{item.address}}</view>
            {{item.distance}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchKey:'',
        searchHistory:[],
        cityInfo:{},
        list:[]
      };
    },
    onLoad() {
      this.searchHistory = uni.getStorageSync('searchHistory') || []
      this.cityInfo = uni.getStorageSync('cityInfo')
    },
    methods:{
      handleSearch(e){ // 搜索
        const searchKey = e || this.searchKey
        if(searchKey.trim()){
          if(!e){
            uni.setStorageSync('searchHistory',[searchKey,...uni.getStorageSync('searchHistory')])
            this.searchHistory = uni.getStorageSync('searchHistory')
          }
          uni.showLoading({
            title:'加载中...'
          })
          this.$get('/merchant/v1/cities/selectCityOrg',{
            name:searchKey,
            cityCode:this.cityInfo.cityCode,
            latitude:uni.getStorageSync('position').latitude,
            longitude:uni.getStorageSync('position').longitude
          },'1').then(res=>{
            this.searchKey = ''
            if(res.code == '1'){
              this.list = res.content
            }
          })
        }
      },
      handleDelete(){  /// 删除历史记录
        uni.setStorageSync('searchHistory',[])
        this.searchHistory = []
      },
      handleSelect(e){  ///  点击门店
        uni.setStorageSync('selectStore',e)
        uni.$emit('changeStore')
        uni.reLaunch({
          url:'/pages/index/index'
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.page-search{
  padding: 12rpx 24rpx;
  .search-header{
    display: flex;
    align-items: center;
    padding: 28rpx 24rpx;
    border-radius: 62rpx;
    background: var(--page-bg);
    font-size: 26rpx;
    .header-city{
      display: flex;
      align-items: center;
      color: var(--title-color);
      margin-right: 16rpx;
      padding-right: 16rpx;
      border-right: 2rpx solid var(--border-color);
      font-weight: bold;
      .image{
        width: 26rpx;
        height: 26rpx;
        margin-right: 4rpx;
      }
    }
    .header-search{
      display: flex;
      align-items: center;
      .input{
        line-height: 1;
      }
    }
  }  ///  search-header end
  
  .search-guess{
    .title{
      line-height: 88rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: bold;
      color: var(--title-color);
      .img{
        width: 28rpx;
        height: 28rpx;
        margin-left: auto;
      }
    }
    .guess-list{
      display: flex;
      flex-wrap: wrap;
      .list-item{
        line-height: 1;
        padding: 14rpx 16rpx;
        margin-right: 12rpx;
        background: #F6F6F6;
        color: #6D6D6D;
        font-size: 22rpx;
        margin-bottom: 12rpx;
        border-radius: 86rpx;
      }
    }
  }
  
  .search-store{
    .store-item{
      margin-top: 32rpx;
      display: flex;
      align-items: flex-start;
      .item-info{
        margin-left: 16rpx;
        flex: 1;
        h2{
          font-size: 28rpx;
          color: var(--title-color);
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        .info-p{
          display: flex;
          align-items: center;
          font-size: 22rpx;
          color: var(--sub-title);
          span{
            font-size: 20rpx;
            margin: 0 10rpx;
          }
          .dot{
            margin-right: auto;
          }
        }
      }
    }
  }
}
</style>
